/*股票表现 StockPerformance.js*/
import React from 'react'
import { connect } from 'dva'
import { Row,Col } from 'antd'
import moment from 'moment'

/**
 * StockPerformanceCharts 股票表现k线图
 */
import {IECharts} from '../../../components'
import style from './stockPerformance.less'
const StockPerformanceCharts = ({ 
    data 
}) => {
console.log('StockPerformanceCharts>>data',data)
	const markPointData=[];
	const Kdata =[]
	const colors=['#00da3c','#ec0000'];

	if(!_.isEmpty(data)&&!_.isEmpty(data.list)){
		data.list.map(i=>{
			Kdata.push(i)
		})
		// for(let i = 0;i<data.list.length;i++){
	 //    if(Kdata.indexOf(data.list[i].time) == -1){
	 //      Kdata.push(data.list[i]);
	 //    }
		// }
		const result = [];
    const obj = {};
    for(let i =0; i<Kdata.length; i++){
       if(!obj[Kdata[i].time]){
          result.push(Kdata[i]);
          obj[Kdata[i].time] = true;
      }
    }
		const dates=result.map((item,i)=>{

		const hh=parseInt(moment(item.time,'YYYYMMDDHHmmss').format('HH'))
			return moment(item.time,'YYYYMMDDHHmmss').format(hh>0?'YYYY-MM-DD HH:mm':'YYYY-MM-DD')
		})
		console.log('StockPerformanceCharts>>Kdata',Kdata,data.list,result)
		data.list.map((item,i)=>{
			if(item.type === 'Buy'){
				markPointData.push({
					name: 'Buy',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(180, 0, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '买',
						},
					},
				})
			}else if(item.type === 'Sell'){
				markPointData.push({
					name: 'Sell',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(0, 180, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '卖',
						},
					},
				})
			}else if(item.type === 'Both'){
				markPointData.push({
					name: 'Buy',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(180, 0, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '买',
						},
					},
				},{
					name: 'Sell',
					coord: [item.time, item.price],
					value: item.price,
					itemStyle: {
						normal: { color: 'rgba(0, 180, 0, 0.6)' },
					},
					label: {
						normal: {
							formatter: value => '卖',
						},
					},
				})
			}
		})
		console.log('StockPerformanceCharts>markPointData',markPointData,Kdata)
		
		const myProps={
			option : {
				color:colors,
				backgroundColor: '#fff',
				animation: false,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					},
					backgroundColor: 'rgba(245, 245, 245, 0.8)',
					borderWidth: 1,
					borderColor: '#ccc',
					padding: 10,
					textStyle: {
						color: '#000'
					}
				},
				grid: [
					{
						left: '15%',
						right: '5%',
						top:'10%',
						height: '50%'
					},
					{
						left: '15%',
						right: '5%',
						top: '70%',
						height: '12%'
					}
				],
				xAxis: [{
					type: 'category',
					data: dates,
					boundaryGap: false,
					axisLine: { lineStyle: { color: '#777' } },
					axisLabel: {
						formatter: value => {
							let text = ''
							let values = value.split(' ');
							text = values.length === 2 ? `${values[0]}\n${values[1]}` : value;
							return text;
						},
						lineHeight: 10,
						fontSize: 10,
					},
					min: 'dataMin',
					max: 'dataMax',
					axisPointer: {
						show: true,
					},
				}, {
					type: 'category',
					gridIndex: 1,
					data: result.map((item,i)=>[item.time]),
					scale: true,
					boundaryGap: false,
					splitLine: { show: false },
					axisLabel: { show: false },
					axisTick: { show: false },
					axisLine: { lineStyle: { color: '#777' } },
					splitNumber: 20,
					min: 'dataMin',
					max: 'dataMax',
				}],
				axisPointer: {
					link: { xAxisIndex: 'all' },
					label: {
						backgroundColor: '#777',
					},
				},
				yAxis: [
					{
						scale: true
					},
					{
						scale: true,
						gridIndex: 1,
						splitNumber: 2,
						axisLabel: {show: false},
						axisLine: {show: false},
						axisTick: {show: false},
						splitLine: {show: false}
					}
				],
				dataZoom: [
					{
						type: 'inside',
						xAxisIndex: [0, 1],
						start: 0,
						end: 100
					},
					{
						show: true,
						xAxisIndex: [0, 1],
						type: 'slider',
						top: '85%',
						start: 0,
						end: 100
					}
				],
				series: [
					{
						name: 'K线图',
						type: 'candlestick',
						data: result.map((item,i)=>[item.open,item.close,item.lowest,item.highest]),
						itemStyle: {
							normal: {
								color: 'rgba(180, 0, 0, 1)',
								color0: 'rgba(0, 180, 0, 1)',
								borderColor: null,
								borderColor0: null
							}
						},
						markPoint: {
							data: markPointData
						},
					},
					{
						name: 'Volume',
						type: 'bar',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: result.map((item,i)=>item.close - item.open>0?[i,item.quantity,1]:[i,item.quantity,-1]),
						itemStyle: {
							normal: {
								color: (p)=>p.value[2]>0?'rgb(180, 0, 0)':'rgb(0, 180, 0)'
							}
						}
					},
					{
						name:'买卖点',
						type: 'bar',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: result.map((item,i)=>item.type!==null?[item.type,item.price]:'没有买卖点'),
					}
				]
			}
		}
		console.log('StockPerformanceCharts>myProps',myProps)
		return (
	    <div className={`chart`} style={{ height: 500,width:1460,position: 'relative',left: -120 }} >
	      <IECharts {...myProps} resizable={true} />
	    </div>
	  )
	}else{
		return (
			<div>
				暂无数据
			</div>
		)
	}
	
}






/**
 * [StockPerformance 股票表现]
 * 引用组件 
 * StockPerformanceCharts 股票表现K线图
 */

class StockPerformance extends React.Component {
  state={
    data:this.props.data
  }

  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
  	console.log('componentWillReceiveProps',this.props,nextProps)
    if((nextProps.begindate!==this.props.begindate)||
    	(nextProps.enddate!==this.props.enddate)||
    	(nextProps.trader!==this.props.trader)||
    	(nextProps.stock !== this.props.stock)){
      this.fetchData(nextProps)
    }
    if(nextProps.data!==this.props.data){
      this.setState({
        data:nextProps.data
      })
    }
  }
  fetchData=(props)=>{
  	console.log('ssssssssss',props)
    this.props.dispatch({
      type: `dailyReplay/getStockPerformance`,
      payload:props
    })
  }
  render() {
    const { data } = this.state
    console.log('StockPerformance>data',data)
    if(!_.isEmpty(data)){
    	return (
	      <Row>
	        <Col>
	        	<StockPerformanceCharts data={data} />
	        </Col>
	      </Row>
	    )
    }else{
    	return (
	      <div>暂无数据</div>
	    )
    }
    
  }
}

StockPerformance.defaultProps={
  begindate: null,
  enddate: null,
  trader: null,
  data:{}
}

export default connect()(StockPerformance)
